var AlarmCountAlarmChart = function () {
  var template = /* html */ `
    <div class="alarm-count-alarm-chart">
      <div ref="chart" class="count-alarm-chart-div"></div>
      <div class="count-alarm-chart-table">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <th>警报名称</th>
            <td v-for="alarm in summaryAlarmData" :key="'name_'+alarm.id">
              {{alarm.name}}
            </td>
          </tr>
          <tr>
            <th>警报次数</th>
            <td v-for="alarm in summaryAlarmData" :key="'count_'+alarm.id">
              {{alarm.count}}
            </td>
          </tr>
          <tr>
            <th>占比</th>
            <td v-for="alarm in summaryAlarmData" :key="'rate_'+alarm.id">
              {{alarm.rate}}%
            </td>
          </tr>
        </table>
      </div>
    </div>
  `;

  return {
    props: {
      alarmData: {
        type: Object,
        required: true
      }
    },

    watch: {
      summaryAlarmData: function () {
        this.clearTimeout();
        this.resetChart();
        this.chartRunning();
      }
    },

    computed: {
      summaryAlarmData: function () {
        return this.alarmData.summaryAlarmData;
      }
    },

    data: function () {
      return {
        timeout: null
      };
    },

    mounted: function () {
      this.showChart();

      var self = this;
      $(this.$el).resize(function () {
        var chartDom = self.$refs['chart'];
        if (chartDom === undefined) {
          return;
        }
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart !== undefined) {
          chart.resize();
        }
      });
      this.chartRunning();
    },

    beforeDestroy: function () {
      this.clearTimeout();
    },

    methods: {
      getChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          chart = echarts.init(chartDom);
        }
        return chart;
      },

      showChart: function () {
        var chart = this.getChart();
        var chartOption = this.getChartOption();
        this.resetChartOption(chartOption);
        chart.setOption(chartOption, true);
      },

      resetChart: function () {
        var chart = this.getChart();
        var chartOption = {};
        this.resetChartOption(chartOption);
        chart.setOption(chartOption);
      },

      getChartOption: function () {
        var chartOption = {
          color: window.boardChartColor,
          grid: {
            right: 40,
            left: 40,
            bottom: 50,
            top: 30
          },
          legend: {
            type: 'scroll',
            top: 3,
            selectedMode: false,
            textStyle: {
              color: '#44D3E4',
              fontSize: 16
            },
            pageTextStyle: {
              color: '#44D3E4',
              fontSize: 16
            },
            formatter: function (value) {
              var label = i18n.getMsg(`remoteBoard.alarmCount.field.${value}`);
              return label;
            }
          },
          xAxis: [{
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 11,
              interval: 0,
              lineHeight: 15,
              formatter: function (value) {
                if (typeof value !== 'string') {
                  return;
                }

                var textList = [];
                var rows = Math.ceil(value.length / 15);
                for (var i = 0; i < rows; i++) {
                  var startIndex = i * 15;
                  textList.push(value.substring(startIndex, startIndex + 15));
                }

                return textList.join('\n');
              }
            }
          }],
          yAxis: [{
            type: 'value',
            min: 0,
            max: 5,
            name: '警报次数',
            nameGap: 10,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          }, {
            type: 'value',
            show: false,
            min: 0,
            max: 100
          }],
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              var name = params[0].name;
              if (typeof name === 'number') {
                return;
              }

              var data = params[0].data;
              var texts = [name];
              var unitObj = {
                "count": "次",
                "rate": "%"
              }
              for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var seriesName = param.seriesName;
                var value = data[seriesName];
                var nameStr = i18n.getMsg(`remoteBoard.alarmCount.field.${seriesName}`);
                texts.push(`${param.marker} ${nameStr}:${value}${unitObj[seriesName]}`);
              }

              return texts.join('<br>');
            }
          },
          dataset: {
            source: []
          },
          series: [{
            type: 'bar',
            name: 'count',
            encode: {
              x: 'name',
              y: 'count'
            }
          }, {
            type: 'bar',
            name: 'rate',
            yAxisIndex: 1,
            encode: {
              x: 'name',
              y: 'rate'
            }
          }]
        };

        return chartOption;
      },

      resetChartOption: function (chartOption) {
        var alarmData = this.alarmData;
        _.set(chartOption, 'yAxis[0].max', alarmData.maxSummaryCount);

        var chartData = alarmData.getAlarmChartData();
        _.set(chartOption, 'dataset.source', chartData);
      },

      chartRunning: function () {
        this.clearTimeout();

        this.alarmRunning();
      },

      alarmRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          var alarmData = self.alarmData;
          var flag = alarmData.incrementDayIndex();
          if (flag) {
            self.resetChart();
          }
          self.timeout = null;
          self.chartRunning();
        }, 10 * 1000);
        this.timeout = timeout;
      },

      clearTimeout: function () {
        var timeout = this.timeout;
        if (timeout !== null) {
          window.clearTimeout(timeout);
          this.timeout = null;
        }
      }
    },

    template: template
  };
}();
